<script lang="ts" setup>
import { GoogleMap, Marker } from "vue3-google-map";
const googleMapApiKey = "AIzaSyDtGfe-uCxF3xUD7KBkv8hYcO9UWQiLw3I";
const center = reactive<any>({ lat: 22.543099, lng: 114.057868 });
function GetClickPoint(point: any) {
  center.lat = point.latLng.lat();
  center.lng = point.latLng.lng();
}
const mapOptions = reactive({
  position: {
    lat: 0,
    lng: 0
  },
  label: "L",
  title: "LADY LIBERTY"
});
</script>
<template>
  <GoogleMap
    :api-key="googleMapApiKey"
    style="width: 100%; height: 500px"
    class="mb-14"
    :center="center"
    :zoom="15"
    :fullscreenControl="false"
    :mapTypeControl="false"
    :scrollwheel="true"
    :streetViewControl="false"
    :zoomControl="false"
    ref="mapRef"
    @click="GetClickPoint"
  >
    <Marker :options="mapOptions"
  /></GoogleMap>
</template>
